<template>
	<view class="hkDetail">
		<view class="fixed-box" v-show="headOpacity==0">
			<view class="sys-head" view :style="{ height: statusBarHeight+'px' }"></view>
			<view class="header-title">
				<view class="head-wrapper" :style="'top:'+statusBarHeight+'px'">
					<view class="head-menu">
						<view class='iconfont icon-xiangzuo' @click="returns"></view>
					</view>
				</view>
				订单详情
			</view>
		</view>
		<view class="fixed-box" :style="'opacity:'+headOpacity" style="background-color: #fff;">
			<view class="sys-head" view :style="{ height: statusBarHeight+'px' }"></view>
			<view class="header-title" style="color: #333;">
				<view class="head-wrapper" :style="'top:'+statusBarHeight+'px'">
					<view class="head-menu">
						<view class='iconfont icon-xiangzuo' style="color: #333;" @click="returns"></view>
					</view>
				</view>
				订单详情
			</view>
		</view>
		<view class="bgBox"></view>
		<view class="content-box" :style="'top:'+(43+statusBarHeight)+'px'">
			<view class="userInfo">
				<view class="top flex-align-center">
					<image src="@/static/images/avatar.png" class="avatar" mode=""></image>
					<view class="name">张欣蕊</view>
					<view class="phone flex-1">177 8835 8831</view>
					<view class="status flex-aj-center">还款中</view>
				</view>
				<view class="flex-between-center middle">
					<view class="newStatus flex-aj-center">已完成</view>
					<view>
						<view class="number">1800000</view>
						<view class="text">每期月还（元）</view>
					</view>
					<view class="line"></view>
					<view>
						<view class="number">36</view>
						<view class="text">分期期数(月)</view>
					</view>
				</view>
			</view>
			<view class="payBack">
				<view class="title">还款记录</view>
				<view class="list flex">
					<view class="left">
						<view class="circleItem flex-aj-center" v-for="(item,index) in 7" :key="index">
							<image
								:src="index==0?'https://cdcrm.oss-cn-hangzhou.aliyuncs.com/cdcrm/business/2024/4/59421714371929913.png':'https://cdcrm.oss-cn-hangzhou.aliyuncs.com/cdcrm/business/2024/4/20391714371946027.png'"
								mode=""></image>
							<view class="line" :class="index==0?'first':''" ></view>
						</view>
					</view>
					<view class="" style="width: 100%;" >
						<view class="right" v-for="(item,index) in 7" :key="index">
							<view class="top flex-between-center">
								<view class="money" >还款金额：<text>￥3,293.94</text></view>
								<view class="flex-aj-center number" >第01期</view>
							</view>
							<view class="bottom flex-between-center">
								<view>2024-03-08 13:29</view>
								<view>已还款</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="orderInfo">
				<view class="title">订单信息</view>
				<view class="item">
					<view>订单编号</view>
					<view>23789238923898492323</view>
				</view>
				<view class="item">
					<view>申请时间</view>
					<view>2024-04-11 13:20</view>
				</view>
				<view class="item">
					<view>还款卡号</view>
					<view>23789238923898492323</view>
				</view>
				<view class="item">
					<view>还款银行</view>
					<view>中国建设银行杭州支行</view>
				</view>
			</view>
		</view>
		<view class="bottomTab">
			<view class="flex-aj-center">联系客服</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				headOpacity: 0
			}
		},
		onPageScroll(e) {
			let scrollY = e.scrollTop;
			let height = this.statusBarHeight + 43
			var opacity = (scrollY / height);
			this.headOpacity = opacity > 1 ? 1 : opacity;
		},
		methods: {
			returns() {
				uni.navigateBack()
			},
			goPage(url) {
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content-box {
		position: relative;
		padding: 24rpx;
		padding-bottom: 200rpx;
	}

	.orderInfo {
		background: #FFFFFF;
		border-radius: 16rpx;
		margin-top: 24rpx;
		padding: 0 24rpx;

		.title {
			padding: 32rpx 0 48rpx;
			font-family: PingFangSC;
			font-weight: 500;
			font-size: 32rpx;
			color: #292929;
			line-height: 32rpx;
			text-align: justify;
			font-style: normal;
		}

		.item {
			padding-bottom: 48rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			:first-child {
				font-family: PingFangSC;
				font-weight: 400;
				font-size: 28rpx;
				color: #666666;
				line-height: 28rpx;
			}

			:last-child {
				font-family: PingFangSC;
				font-weight: 400;
				font-size: 28rpx;
				color: #292929;
				line-height: 28rpx;
				text-align: right;
				font-style: normal;
			}
		}
	}

	.bottomTab {
		position: fixed;
		bottom: 0;
		left: 0;
		background: #FFFFFF;
		box-shadow: 0rpx -2rpx 0rpx 0rpx #F5F5F5;
		padding: 24rpx;
		width: 100%;
		>view{
			width: 100%;
			height: 96rpx;
			background: #FF2945;
			border-radius: 48rpx;
			font-family: PingFangSC;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 32rpx;
		}
	}

	.payBack {
		background: #FFFFFF;
		border-radius: 16rpx;
		margin-top: 16rpx;
		padding: 0 24rpx;

		.title {
			padding: 32rpx 0;
			font-family: PingFangSC;
			font-weight: 500;
			font-size: 32rpx;
			color: #292929;
			line-height: 32rpx;
		}

		.list {
			.left {
				margin-right: 16rpx;
				padding-top: 4rpx;
				.circleItem {
					flex-direction: column;

					image {
						width: 32rpx;
						height: 32rpx;
					}

					.line {
						width: 2rpx;
						height: 98rpx;
						background: #E1E9F5;
						&.first{
							background-color: #FF9147;
						}
					}
				}
				.circleItem:last-child{
					.line{
						width: 0;
					}
				}
			}

			.right {
				margin-bottom: 42rpx;
				.top {
					.money{
						font-family: PingFangSC;
						font-weight: 500;
						font-size: 28rpx;
						color: #1F1F1F;
						line-height: 28rpx;

						text {
							color: #FF3341;
						}
					}

					.number {
						width: 96rpx;
						height: 40rpx;
						background: rgba(31, 120, 255, 0.08);
						border-radius: 4rpx;
						font-family: PingFangSC;
						font-weight: 500;
						font-size: 24rpx;
						color: #748399;
						line-height: 24rpx;
					}
				}

				.bottom {
					margin-top: 24rpx;

					:first-child {
						font-family: PingFangSC;
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
						line-height: 24rpx;
					}

					:last-child {
						font-family: PingFangSC;
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
						line-height: 24rpx;
					}
				}
			}
			.right:first-child{
				.number{
					background: rgba(245,139,69,0.12);
					color: #F58B45;
				}
				.bottom{
					:last-child{
						color: #18CC84;
					}
				}
			}
		}
	}

	.userInfo {
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 0 24rpx;
		margin-bottom: 24rpx;

		.top {
			padding: 24rpx 0;

			image {
				width: 48rpx;
				height: 48rpx;
				margin-right: 16rpx;
			}

			.name {
				font-family: PingFangSC;
				font-weight: 500;
				font-size: 32rpx;
				color: #292929;
				line-height: 32rpx;
				text-align: left;
				font-style: normal;
				margin-right: 16rpx;
			}

			.number {
				font-family: PingFangSC;
				font-weight: 400;
				font-size: 28rpx;
				color: #999999;
				line-height: 28rpx;
				text-align: left;
				font-style: normal;
			}

			.status {
				width: 120rpx;
				height: 48rpx;
				background: rgba(255, 55, 41, 0.04);
				border-radius: 24rpx;
				font-family: PingFangSC;
				font-weight: 500;
				font-size: 28rpx;
				color: #FF2945;
				line-height: 28rpx;
				text-align: left;
				font-style: normal;
			}
		}

		.middle {
			padding: 48rpx 0;
			border-top: 2rpx solid #f5f5f5;
			position: relative;

			.newStatus {
				position: absolute;
				top: 30rpx;
				right: 0;
				width: 120rpx;
				height: 48rpx;
				background: rgba(24, 204, 132, 0.04);
				border-radius: 24rpx;
				font-family: PingFangSC;
				font-weight: 500;
				font-size: 24rpx;
				color: #18CC84;
				line-height: 24rpx;
			}

			>view {
				width: 302rpx;
				text-align: center;

				:first-child {
					font-family: D-DINExp;
					font-weight: bold;
					font-size: 48rpx;
					color: #FF2945;
					line-height: 48rpx;
					text-align: center;
					font-style: normal;
					margin-bottom: 16rpx;
				}

				:last-child {
					font-family: PingFangSC;
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
					line-height: 24rpx;
					text-align: center;
					font-style: normal;
				}
			}

			.line {
				width: 2rpx;
				height: 56rpx;
				background: #F5F5F5;
			}
		}

		.bottoms {
			>view {
				width: 316rpx;
				height: 80rpx;
				background: rgba(255, 127, 41, 0.08);
				border-radius: 8rpx;
				font-family: PingFangSC;
				font-weight: 500;
				font-size: 28rpx;
				color: #FF7E29;
				line-height: 28rpx;

				&:last-child {
					background: rgba(255, 41, 69, 0.08);
					color: #FF2945;
				}
			}
		}
	}

	.bgBox {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 344rpx;
		background: linear-gradient(90deg, #FF961F 0%, #FF781F 100%);
	}

	.fixed-box {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 99;

		.header-title {
			height: 43px;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;

			.head-wrapper {
				z-index: 999;
				display: flex;
				align-items: center;
				position: fixed;
				left: 30rpx;
				top: 0;
				/* #ifdef MP */
				height: 43px;
				/* #endif */
				/* #ifdef H5 */
				height: 114rpx;

				/* #endif */
				.head-menu {
					display: flex;
					align-items: center;
					height: 54rpx;
					border-radius: 27rpx;

					.iconfont {
						flex: 1;
						text-align: left;
						color: #fff;
						box-sizing: border-box;
					}
				}
			}

		}
	}
</style>